知识点 | 纯代码实现NSOutlineView的详细步骤

                                                                             
Tech

【故事背景】

同事A和B都是小菜鸟一枚，最近都在自学MAC开发。

我想写个菜单，分为主食、甜点、饮料等类目，每个类目下又有一些分类，用什么控件比较合适呢？NSTableView好像不太方便展示分组数据。

可以试试NSOutlineView。NSOutlineView是NSTableView的子类，但是他比NSTableView多了分组的功能，使用层级的数据结构。

哦！那我查查怎么使用。

半小时后……

我想用纯代码实现，但是查了半天都是用storyboard/xib实现的。

那你参照storyboard的例子改为用纯代码实现的，也不难吧。创建一个OS X项目工程，新建一个NSViewController，在ViewController中添加NSOutlineView对象并实现NSOutlineViewDataSource和NSOutlineViewDelegate相应的方法……

说起来简单，不过我在实践中还是遇到了不少问题。

哦？什么问题？我们一起看下。

经过两位的研究，实现详情以及注意事项总结为以下几个步骤：

1.初始化outlineView并设置相关属性

需要注意的是，outlineView必须放在scrollView上才可以显示，所以我们在初始化outlineView的时候，需要将outlineView作为scrollView的documentView展示。

1. NSTableColumn *tableColumn = [[NSTableColumn alloc] init];

2. tableColumn.resizingMask = NSTableColumnAutoresizingMask;

3. NSOutlineView *outlineView = [[NSOutlineView alloc] init];

4. outlineView.allowsColumnResizing = YES;

5. outlineView.headerView = nil;

6. outlineView.columnAutoresizingStyle = NSTableViewFirstColumnOnlyAutoresizingStyle;

7. outlineView.usesAlternatingRowBackgroundColors = YES;//背景颜色的交替，一行白色，一行灰色。

8. [outlineView addTableColumn:tableColumn];

9. NSScrollView *scrollView = [[NSScrollView alloc] init];

10. scrollView.documentView = outlineView;

11. scrollView.hasVerticalScroller = YES;

12. scrollView.autohidesScrollers = YES;

13. self.view = scrollView;

另外需要注意的一点是，ViewController中需要实现loadView方法。

2.准备好用于展示的数据

如果在项目中，数据可以通过model的形式从外部直接传过来，demo里我们就直接初始化。这里需要注意，outlinView需要的数据是一种类型的（父子节点数据是同种类型）。

Demo中用到的model比较简略，只有NSString *name（用于展示的文案）和NSArray *childNodes（子节点）。

3.根据需要自定义NSTableCellView

除了自定义布局和样式，还需要在自定义的cellview中实现数据的展示：

1. // OutlineItemCellView.m

2. - (void)setObjectValue:(id)objectValue {

3. [super setObjectValue:objectValue];

4. if (self.objectValue) {

5. if ([self.objectValue isKindOfClass:[OutlineViewDataModel class]]) {

6. OutlineViewDataModel *model = (OutlineViewDataModel *)self.objectValue;

7. [self updateControlsForDataObject:model.name];

8. }

9. }

10. }

11. - (void)updateControlsForDataObject:(NSString *)name {

12. self.textField.stringValue = name;

13. }

4.根据需要自定义NSTableHeaderCell

类似于NSTableCellView，自定义样式和数据展示即可。

5.在viewController中实现NSOutlineViewDataSource和NSOutlineViewDelegate的方法。

下面介绍一下几个NSOutlineViewDataSource方法，根据需要选择性实现：

1.每一层级节点包含的下一级节点的数量。

1. //当item为空时表示根节点.

2. if (item != nil && [item isKindOfClass:[OutlineViewDataModel class]]) {

3. return ((OutlineViewDataModel *)item).childNodes.count;

4. }

5. return _dataModel.childNodes.count;

6. }

2.每一层级节点的模型对象为item时,根据item获取子节点模型。item为nil空时表示获取顶级节点模型。

1. - (id)outlineView:(NSOutlineView *)outlineView child:(NSInteger)index ofItem:(id)item {

2. if(!item) {

3. return _dataModel.childNodes[index];

4. }else {

5. OutlineViewDataModel *model = item;

6. return model.childNodes[index];

7. }

8. }

3.节点是否可以打开/关闭。

1. - (BOOL)outlineView:(NSOutlineView *)outlineView isItemExpandable:(id)item {

2. //count 大于0表示有子节点,需要允许Expandable

3. if(!item) {

4. return [_dataModel.childNodes count]>0 ;

5. }else {

6. OutlineViewDataModel *model = item;

7. return [model.childNodes count]>0;

8. }

9. }

4.设置每个数据载体对应的具体数据，根据节点模型对象item,更新节点视图。

1. - (id)outlineView:(NSOutlineView *)outlineView objectValueForTableColumn:(NSTableColumn *)tableColumn byItem:(id)item {

2. return item;

3. }

这个地方用于向自定义的cellView传递数据，如果return item.name，则那边接收到的“self.objectValue”就是item.name。

5.展开的节点是否自动保存。

1. - (id)outlineView:(NSOutlineView *)outlineView itemForPersistentObject:(id)object ;

6.自定义row。

1. - (NSTableRowView *)outlineView:(NSOutlineView *)outlineView rowViewForItem:(id)item ;

下面是NSOutlineViewDelegate的几个方法：

1.创建视图,更新item模型中数据到视图元素。

1. - (NSView *)outlineView:(NSOutlineView *)outlineView viewForTableColumn:(NSTableColumn *)tableColumn item:(id)item {

2. OutlineItemCellView *cellView = [outlineView makeViewWithIdentifier:@"cellView" owner:nil];

3. if (cellView == nil) {

4. cellView = [[OutlineItemCellView alloc] init];

5. cellView.identifier = @"cellView";

6. }

7. return cellView;

8. }

这里需要注意cellView一开始要复用是没有的，所以要初始化一下。storyboard实现outlineView不需要考虑，所以纯代码实现的时候容易忽略这点。

2.是否绘制“组行”样式。

1. - (BOOL)outlineView:(NSOutlineView *)outlineView isGroupItem:(id)item {

2. if (item && [item isKindOfClass:OutlineViewDataModel.class] && ((OutlineViewDataModel *)item).childNodes) {

3. return true;

4. }else {

5. return false;

6. }

7. }

3.设置每一行的高度。

1. - (CGFloat)outlineView:(NSOutlineView *)outlineView heightOfRowByItem:(id)item ;

4.获取到选择节点后的通知。

1. - (void)outlineViewSelectionDidChange:(NSNotification *)notification ;

这里可以获取点击节点的相关信息，根据需要作出相应处理。比如打印节点name：

1. NSOutlineView *treeView = notification.object;

2. NSInteger row = [treeView selectedRow];

3. OutlineViewDataModel *model = (OutlineViewDataModel*)[treeView itemAtRow:row];

4. NSLog(@"name = %@",model.name);

以上五步完成之后，运行程序大概是这个样子：

如果我们想要自定义每行的背景色以及点击高亮色，该怎么做呢？

可以在OutlineItemCellView中设置背景色试试。

效果是这样的...

因为左侧箭头那部分并不属于cellView，cellView的下面还有一层rowView。

这个时候我们需要自定义NSTableRowView，在OutlineRowView中设置相应样式处理，并实现rowViewForItem方法，效果如下：

以上是在探索纯代码实现NSOutlineView的学习过程中的一些小总结，希望大家不吝珠玉，给予补充或者提出建议，一起学习交流。

推荐阅读

好看的话，请点这里